<template>
  <transition name="dialog-fade">
    <el-dialog
      v-if="showDialog"
      :title="dialogTitle"
      class="dialog-component"
      :visible.sync="showDialog"
      width="1200px"
      height="1000px"
      @close="closeDialog(0)">
      <div>1.成绩的计量单位需要根据实际情况进行输入</div>
      <div>2.输入成绩后才能进行计算排名和积分</div>
      <div>人数：{{ total }} 人</div>
      <el-button type="primary" @click="updateRanking">一键计算排名积分</el-button>
      <el-table v-loading="loading" :data="applyUserList">
        <el-table-column label="用户登陆名" align="center" prop="userName"/>
        <el-table-column label="用户姓名" align="center" prop="userNickname"/>
        <el-table-column label="用户电话" align="center" prop="userPhone"/>
        <el-table-column label="学院" align="center" prop="params.dept.deptName"/>
        <el-table-column label="比赛项目名称" align="center" prop="itemName"/>
        <el-table-column label="排名" align="center" prop="ranking" />
        <el-table-column label="获得积分" align="center" prop="points" />
        <el-table-column label="比赛成绩" align="center" prop="score">
          <template slot-scope="{ row }">
            <template v-if="row.edit">
              <el-input v-model="row.score" class="edit-input"/>
            </template>
            <span v-else>{{ row.score }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.edit"
              type="success"
              size="small"
              icon="el-icon-circle-check-outline"
              @click="confirmEdit(row)">
              确认
            </el-button>
            <el-button
              v-else
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="row.edit=!row.edit">
              成绩录入
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </transition>
</template>

<script>
import {listSportApplyUser, updateRanking, updateSportApplyUser} from "@/api/system/sportApplyUser";

export default {
  name: "addScoreDialog",
  props: {
    dialogTitle: {
      type: String,
      default: "成绩录入"
    },
    itemInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },

  data() {
    return {
      tag: false,
      loading: false,
      total: '',
      applyUserList: [],
      showDialog: false,
      formInfo: JSON.parse(JSON.stringify(this.itemInfo))
    };
  },

  created() {
    this.getList();
  },

  methods: {
    // 成绩录入按钮
    confirmEdit(row) {
      row.edit = false;
      updateSportApplyUser(row).then(response => {
        this.$modal.msgSuccess("录入成功！");
      })
    },

    /**
     * 获取用户的比赛信息，并且为edit赋值
     * @returns {Promise<void>}
     */
    async getList() {
      this.loading = true
      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        itemId: this.formInfo.id
      };
      const data = await listSportApplyUser(queryParams)
      this.total = data.total
      const items = data.rows
      this.applyUserList = items.map(v => {
        this.$set(v, 'edit', false)
        return v
      })
      this.loading = false
    },

    updateRanking() {
      updateRanking(this.formInfo.id).then(response => {
        this.$modal.msgSuccess("计算成功！")
        this.getList();
      })
    },

    /**
     * 关闭弹窗
     */
    closeDialog(flag) {
      this.showDialog = false;
      this.$emit("closeDialog", flag);
    }
  }
}

</script>

<style scoped>
.edit-input {
}
</style>
